<template>
  <div class="task-detail">
    <header-bar class="head" title="任务详情"></header-bar>
    <div class="content-wrapper">
      <div class="content" ref="scroll">
        <div class="scroll-main">
          <group class="group" label-width="5em">
            <h3 slot="title" class="title">
              <div class="icon-wrapper">
                <icon :name="document.icon[0]" :scale="2"></icon>
              </div>
              <span>基本信息</span>
            </h3>
            <cell class="content-basicInfo" title="标题:" :value="document.title" value-align="left"></cell>
            <cell class="content-basicInfo" title="发件人:" :value="document.author" value-align="left"></cell>
            <cell class="content-basicInfo" title="发送时间:" :value="document.posttime" value-align="left">
            </cell>
            <cell class="content-basicInfo" title="内容:" :value="document.content"  value-align="left" align-items="flex-start"></cell>
          </group>
          <group label-width="5em" class="group group-2">
            <h3 slot="title" class="title">
              <div class="icon-wrapper">
                <icon :name="document.icon[1]" :scale="2"></icon>
              </div>
              <span>处理操作</span>
            </h3>
            <cell title="审批时间:" :value="document.posttime" value-align="left"></cell>
            <cell title="处理操作:" :value="document.comment" value-align="left" align-items="flex-start"></cell>
          </group>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    Group,
    Cell,
    XTextarea,
    XButton
  } from 'vux'
  import BScroll from 'better-scroll'
  import HeaderBar from '@/components/HeaderBar'

  export default{
    components: {
      Group,
      Cell,
      XTextarea,
      HeaderBar,
      XButton
    },
    data(){
      return {
        scroll: null,
        document: {
          title: '2017年12月份工资表审批单',
          author: '张舜',
          icon:["circles","flag"],
          posttime: '2017-12-31',
          content: '2017年12月份工资表审批,请认真审批.2017年12月份工资表审批,请认真审批.2017年12月份工资表审批,请认真审批',
          comment: '同意，请继续跟进调查并执行。同意，请继续跟进调查并执行'
        }
      }
    },
    methods: {
      _initScroll() {
        this.scroll = new BScroll(this.$refs.scroll)
      }
    },
    mounted(){
      setTimeout(()=>{
        this._initScroll()
      }, 20)
    }
  }
</script>

<style lang="less" scoped>
  @import '~@/styles/variables.less';
  @import '~@/styles/mixin.less';

  .task-detail{
    background-color: @color-background-main;
    .head{
      
    }
    .content-wrapper{
      position: absolute;
      top: @height-header-bar;
      bottom: 0;
      width: 100%;
      .content{
        width: 100%;
        height: 100%;
        color: #a1a1a1;
        overflow: hidden;
        h3.title{
          display: flex;
          align-items: center;
          font-size: @font-size-normal;
          color: #4d4d4d;
          background-color: #fff;
          padding: 8px 0;
          // margin-top: 0.2rem;
          height: 0.7rem;
          line-height: 0.7rem;
          .icon-wrapper{
            display: flex;
            align-items: center;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            /*  background-color: @color-theme-yellow-medium;*/
            margin-right: 0.12rem;
          }
        }
        .group{
          background-color: #fff;
          font-size:30px;
          text-align: left;
          padding: 0.26rem;
         
        }
        .group-2{
          margin-top: 20px;
        }
       .border-1px(#d9d9d9) 
      }
    }
  }
</style>

